<div class="zi_piao chantu layui-hide">
    <div class="men">
        <div class="xiaotit">进销项票税</div>
        <div class="fen2 float-l wd50">
            <div>
                <span class="float-l" style="padding-left: 59px;padding-bottom: 5px;font-weight: 700;">销项票：</span>
                <span class="float-r" style="font-weight: 700;">销项价税合计：<span id="zi_piao_kai_money">0</span></span>
            </div>
            <div class="clear"></div>
            <div class="chart" id="zi_chart_xiao" style="height: 40px"></div>
            <div>
                    <span class="float-l fangding" style="padding-left: 59px;padding-top: 5px;">
                        <span class="fanglan tuclr1"></span><span style="margin-left: 20px">不含税金额：<span id="zi_piao_kai_nofee">0</span></span>
                    </span>
                <span class="float-l fangding" style="padding-left: 59px;padding-top: 5px;">
                        <span class="fanglv tuclr2"></span><span style="margin-left: 20px">税额：<span id="zi_piao_kai_ratefee">0</span></span>
                    </span>
            </div>
            <div class="clear"></div>

            <div>
                <span class="float-l" style="padding-left: 59px;padding-bottom: 5px;font-weight: 700;margin-top: 30px">进项票：</span>
                <span class="float-r" style="font-weight: 700;">进项价税合计：<span id="zi_piao_shou_money">0</span></span>
            </div>
            <div class="clear"></div>
            <div class="chart" id="zi_chart_jin" style="height: 40px"></div>
            <div>
                <span class="float-l fangding" style="padding-left: 59px;padding-top: 5px;">
                    <span class="fanglan tuclr3"></span><span style="margin-left: 20px">不含税合计：<span id="zi_piao_shou_nofee_zhuan">0</span></span>
                </span>
                <span class="float-l fangding" style="padding-left: 59px;padding-top: 5px;">
                    <span class="fanglv tuclr4"></span><span style="margin-left: 20px">税额（专票）：<span id="zi_piao_shou_ratefee_zhuan">0</span></span>
                </span>
            </div>
            <div class="clear"></div>
        </div>
        <div class="fen1 float-l wd50">
            <div style="margin: 0 auto">
                <div class="ffmg" style="margin: 0 auto;width: 200px">
                    <div class="fftt1 fw700" style="padding-top: 20px">应计增值税</div>
                    <div class="fftt2 fw700"><span id="zi_piao_zengzhifee">0</span></div>
                    <div class="fftt3">销项税额-进项税额（专票）</div>
                </div>
            </div>
        </div>
        <div class="clear" style="padding-top: 30px"></div>
    </div>

    <div class="xiaoxian"></div>
    <div class="men">
        <div class="xiaotit">月度发票分析</div>
        <div class="fen3" style="margin-top: 20px">
            <div>
                <div class="float-l fw700">月度开票/收票</div>
                <div class="yuequ layui-form float-r fw700">
                    <input type="text" id="yueshoukaimonth" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="clear"></div>
            <div class="chart" id="zi_chart_yuekaishou" style="height: 350px"></div>
        </div>
        <div style="padding-left: 150px">
                <span class="float-l fangding" style="padding-top: 5px;">
                    <span class="fanglan tuclr5"></span><span style="margin-left: 20px">开票（价税合计）</span>
                </span>
            <span class="float-l fangding" style="padding-left: 59px;padding-top: 5px;">
                    <span class="fanglv tuclr6"></span><span style="margin-left: 20px">收票（价税合计）</span>
                </span>
        </div>
        <div class="clear" style="padding-top: 30px"></div>
    </div>


    <div class="xiaoxian"></div>
    <div class="men">
        <div class="xiaotit">进项票分析</div>
        <div class="float-l wd50">
            <div class="float-l wd50">
                <div class="fw700" style="padding-bottom: 10px">进项票类型</div>
                <div class="chart" id="zi_chart_jinpiaoxing" style="height: 200px"></div>
            </div>
            <div class="float-l wd50" style="padding-top: 40px">
                <div class="float-l fangding" style="padding-left: 20px;padding-top: 5px;">
                    <span class="fanglan tuclr7"></span><span style="margin-left: 20px">专票价税合计：<span id="zi_piao_shou_money_zhuan">0</span></span>
                </div><div class="clear"></div>
                <div class="float-l fangding" style="padding-left: 20px;padding-top: 5px;">
                    <span class="fanglan tuclr8"></span><span style="margin-left: 20px">普票价税合计：<span id="zi_piao_shou_money_pu">0</span></span>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="jxplb float-r wd50">
            <div class="float-l wd50">
                <div class="fw700" style="padding-bottom: 10px">进项票类别</div>
                <div class="chart" id="zi_chart_jinpiaobie" style="height: 200px"></div>
            </div>
            <div class="float-l wd50" style="padding-top: 40px">
                <div class="float-l fangding" style="padding-left: 20px;padding-top: 5px;">
                    <span class="fanglan tuclr1" style="top: 20px"></span><span style="margin-left: 20px;font-size: 16px;" class="fw700">进项票合计：
                        <span id="zi_piao_shou_money2" style="font-size: 26px">0</span></span>
                </div>
                <div class="clear" style="padding-top: 20px"></div>
                <div class="float-l fangding" style="padding-left: 20px;padding-top: 5px;">
                    <span class="fanglan tuclr1"></span><span style="margin-left: 20px">材料类：<span id="zi_piao_shou_money_cai">0</span></span>
                </div><div class="clear"></div>
                <div class="float-l fangding" style="padding-left: 20px;padding-top: 5px;">
                    <span class="fanglan tuclr2"></span><span style="margin-left: 20px">人工类：<span id="zi_piao_shou_money_ren">0</span></span>
                </div><div class="clear"></div>
                <div class="float-l fangding" style="padding-left: 20px;padding-top: 5px;">
                    <span class="fanglan tuclr3"></span><span style="margin-left: 20px">机械设备类：<span id="zi_piao_shou_money_ji">0</span></span>
                </div><div class="clear"></div>
                <div class="float-l fangding" style="padding-left: 20px;padding-top: 5px;">
                    <span class="fanglan tuclr4"></span><span style="margin-left: 20px">专业分包类：<span id="zi_piao_shou_money_fen">0</span></span>
                </div><div class="clear"></div>
                <div class="float-l fangding" style="padding-left: 20px;padding-top: 5px;">
                    <span class="fanglan tuclr5"></span><span style="margin-left: 20px">其他类：<span id="zi_piao_shou_money_qi">0</span></span>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear" style="padding-top: 30px"></div>
    </div>

</div>
<script>

    layui.use(['laytp', 'form', 'laydate'], function() {
        var form = layui.form, layer = layui.layer, laydate = layui.laydate;
        var date = new Date();
        var year = date.getFullYear();
        lay('#yueshoukaimonth').each(function(){
            var date = new Date();
            laydate.render({
                elem: this
                ,type: 'month'
                ,range: true
                ,value: year+'-01 - '+year+'-12'
                ,done: function(value, date, endDate){
                    var thisObj = $(this)[0].elem;
                    setTimeout(function () {
                        dataLayerAfterSea(thisObj);
                    },200)
                    setTimeout(function () {
                        func_zi_piao('yueshouzhi');
                    },200)
                }
            });
        });
    });

    function func_zi_piao(seatype='') {
        var yueshoukaimonth = $("#yueshoukaimonth").val() || '';
        layui.use(['laytp', 'form', 'element'], function() {
            var form = layui.form, layer = layui.layer, element = layui.element;
            facade.ajax({url: ask_engin_cha_zi_piao,data:{enginid:param_enginid, yueshoukaimonth:yueshoukaimonth}}).done(function(res){
                if (res.code === 2000) {
                    var data = res.data;

                    zi_chart_yuekaishou('zi_chart_yuekaishou', data);
                    if(seatype == 'yueshouzhi'){
                        return false;
                    }


                    $("#zi_piao_kai_money").html(parseFormatNum(data.kai_money)).addClass('colorlan').click(function () {
                        openNavPage('查看项目开票信息','piao_kai/index.php?status=1&enginid='+data.id);
                    });
                    $("#zi_piao_kai_nofee").html(parseFormatNum(data.kai_nofee));
                    $("#zi_piao_kai_ratefee").html(parseFormatNum(data.kai_ratefee)).addClass('colorlan').click(function () {
                        openNavPage('查看项目开票信息','piao_kai/index.php?status=1&enginid='+data.id);
                    });
                    zi_chart_xiao('zi_chart_xiao', data);

                    $("#zi_piao_shou_money").html(parseFormatNum(data.shou_money)).addClass('colorlan').click(function () {
                        openNavPage('查看项目收票信息','piao_shou/index.php?status=1&enginid='+data.id);
                    });
                    $("#zi_piao_shou_nofee_zhuan").html(parseFormatNum(data.shou_nofee_zhuan));
                    $("#zi_piao_shou_ratefee_zhuan").text(parseFormatNum(data.shou_ratefee_zhuan)).addClass('colorlan').click(function () {
                        openNavPage('查看项目收票明细信息','piao_shou/detail.php?status=1&piaotype=1&enginid='+data.id);
                    });
                    zi_chart_jin('zi_chart_jin', data);
                    $("#zi_piao_zengzhifee").html(parseFormatNum(data.zengzhifee));


                    zi_chart_jinpiaoxing('zi_chart_jinpiaoxing', data);
                    $("#zi_piao_shou_money_zhuan").text(parseFormatNum(data.shou_money_zhuan)).addClass('colorlan').click(function () {
                        openNavPage('查看项目收票明细信息','piao_shou/detail.php?status=1&piaotype=1&enginid='+data.id);
                    });
                    $("#zi_piao_shou_money_pu").text(parseFormatNum(data.shou_money_pu)).addClass('colorlan').click(function () {
                        openNavPage('查看项目收票明细信息','piao_shou/detail.php?status=1&piaotype=2&enginid='+data.id);
                    });


                    zi_chart_jinpiaobie('zi_chart_jinpiaobie', data);
                    $("#zi_piao_shou_money2").text(parseFormatNum(data.shou_money)).addClass('colorlan').click(function () {
                        openNavPage('查看项目收票信息','piao_shou/index.php?status=1&enginid='+data.id);
                    });
                    $("#zi_piao_shou_money_cai").text(parseFormatNum(data.shou_money_cai)).addClass('colorlan').click(function () {
                        openNavPage('查看项目收票明细信息','piao_shou/detail.php?status=1&yongtype=cai&enginid='+data.id);
                    });
                    $("#zi_piao_shou_money_ren").text(parseFormatNum(data.shou_money_ren)).addClass('colorlan').click(function () {
                        openNavPage('查看项目收票明细信息','piao_shou/detail.php?status=1&yongtype=ren&enginid='+data.id);
                    });
                    $("#zi_piao_shou_money_ji").text(parseFormatNum(data.shou_money_ji)).addClass('colorlan').click(function () {
                        openNavPage('查看项目收票明细信息','piao_shou/detail.php?status=1&yongtype=ji&enginid='+data.id);
                    });
                    $("#zi_piao_shou_money_fen").text(parseFormatNum(data.shou_money_fen)).addClass('colorlan').click(function () {
                        openNavPage('查看项目收票明细信息','piao_shou/detail.php?status=1&yongtype=fen&enginid='+data.id);
                    });
                    $("#zi_piao_shou_money_qi").text(parseFormatNum(data.shou_money_qi)).addClass('colorlan').click(function () {
                        openNavPage('查看项目收票明细信息','piao_shou/detail.php?status=1&yongtype=qi&enginid='+data.id);
                    });



                }
            });
        });
    }



    function zi_chart_xiao(chat_id, data) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            tooltip: {},
            color: [colors[1], colors[2]],
            backgroundColor: '#FFFFFF',
            grid: {
                top: '-44px',
                bottom: '-56px',
                left: '50px',
                right: '1px',
                containLabel: true
            },
            xAxis: {
                type: ''
            },
            yAxis: {
                type: '',
                data: ['']
            },
            series: [
                {
                    name: '不含税金额',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [data.kai_nofee]
                },
                {
                    name: '税额',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [data.kai_ratefee]
                }
            ]
        };
        mychat.setOption(option);
    }
    function zi_chart_jin(chat_id,data) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            tooltip: {},
            color: [colors[3], colors[4]],
            backgroundColor: '#FFFFFF',
            grid: {
                top: '-44px',
                bottom: '-56px',
                left: '50px',
                right: '1px',
                containLabel: true
            },
            xAxis: {
                type: ''
            },
            yAxis: {
                type: '',
                data: ['']
            },
            series: [
                {
                    name: '不含税合计',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [data.shou_nofee_zhuan]
                },
                {
                    name: '税额（专票）',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [data.shou_ratefee_zhuan]
                }
            ]
        };
        mychat.setOption(option);
    }
    function zi_chart_yuekaishou(chat_id, data) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            color: [colors[5], colors[6]],
            backgroundColor: '#FFFFFF',
            legend: {},
            tooltip: {},
            grid: {
                top: '15px',
                bottom: '1px',
                left: '1',
                right: '1',
                containLabel: true
            },
            dataset: {
                source: data.yuekaishou
            },
            xAxis: { type: 'category' },
            yAxis: { name:'' },
            series: [{ type: 'bar' }, { type: 'bar' }]
        };
        mychat.setOption(option);
    }
    function zi_chart_jinpiaoxing(chat_id, data) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            color: [colors[7], colors[8]],
            backgroundColor: '#FFFFFF',
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '进项票类型',
                    type: 'pie',
                    radius: '80%',
                    data: [
                        { value: data.shou_money_zhuan, name: '专票价税合计' },
                        { value: data.shou_money_pu, name: '普票价税合计' },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        mychat.setOption(option);
    }
    function zi_chart_jinpiaobie(chat_id, data) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            color: [colors[1], colors[2], colors[3], colors[4], colors[5]],
            backgroundColor: '#FFFFFF',
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '进项票类别',
                    type: 'pie',
                    radius: '80%',
                    data: [
                        { value: data.shou_money_cai, name: '材料类' },
                        { value: data.shou_money_ren, name: '人工类' },
                        { value: data.shou_money_ji, name: '机械设备类' },
                        { value: data.shou_money_fen, name: '专业分包类' },
                        { value: data.shou_money_qi, name: '其他类' },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        mychat.setOption(option);
    }


</script>

